import React, { Component } from "react";

export default class App extends Component {
	constructor() {
		super();
		this.state = {
			ele: <h2>jsx变量</h2>,
			arr: ["name", "age"],
			title: "title",
			show: true,
			name: "jack",
			list: [
				{ name: "jack", id: "1" },
				{ name: "zhang", id: "2" }
			],
			active: true,
			// 直接使用React.createElement
			jsx: React.createElement("h1", { className: "abc" }, "hello")
		}
	}
	// 调用setState会重新调用render函数。
	// 事件中绑定this，默认指向的是undefined，因为jsx并不是真实的DOM
	render() {
		// return this.state.jsx;
		let virDom = <h1>标题</h1>;
		// 这里会打印出虚拟DOM结构
		console.log(virDom);
		return (
			<>
				{/* 绑定jsx变量,jsx中使用{}绑定JavaScript表达式 */}
				{this.state.ele}
				{/* 数组直接展示 */}
				{this.state.arr}
				<ul>
					{this.state.list.map((item, index) => {
						return <li key={index}>{item.name}</li>
					})}
				</ul>
				{/* JSX表达式 */}
				{this.state.show ? <h2>展示</h2> : <h2>隐藏</h2>}
				{this.state.show && <h3>显示</h3>}
				{/* 模板字符串 */}
				{`name--${this.state.name}`}
				{/* 属性绑定 */}
				<div title={this.state.title}>属性绑定</div>
				<div className={"message " + (this.state.active ? "active" : "")}>你好啊</div>
				<div className={["message", (this.state.active ? "active" : "")].join(" ")}>你好啊</div>
				<div style={{ fontSize: "30px", color: "red", backgroundColor: "blue" }}>我是文本</div>
			</>
		)
	}
}

//1. JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。
// 第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。
// 第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。
// 其他依次为children，按照顺序排列。
// 下面JSX会被编译：
// <MyButton color="blue" shadowSize={2}>
// 	Click Me
// </MyButton>
// 编译为：
// React.createElement(
// 	MyButton,
// 	{ color: 'blue', shadowSize: 2 },
// 	'Click Me'
// )
// React老版本使用jsx需要导入React，是因为jsx需要经过React.createElement转化为虚拟DOM。

// 2. 属性展开
// function App1() {
// 	return <Greeting firstName="Ben" lastName="Hector" />;
// }

// function App2() {
// 	const props = { firstName: 'Ben', lastName: 'Hector' };
// 	return <Greeting {...props} />;
// }

// 3. 你还可以选择只保留当前组件需要接收的 props，并使用展开运算符将其他 props 传递下去。
// const Button = props => {
// 	const { kind, ...other } = props;
// 	const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
// 	return <button className={className} {...other} />;
// };

// const App = () => {
// 	return (
// 		<div>
// 			<Button kind="primary" onClick={() => console.log("clicked!")}>
// 				Hello World!
// 		</Button>
// 		</div>
// 	);
// };

// 4. onClick绑定到自定义组件上，会当作props属性传递下去。

// 5. 虚拟滚动库：
// react-window 和 react-virtualized 是热门的虚拟滚动库。